تصميم علم فلسطين الشقيقه html & css
تصميم علم فلسطين بلغتى Html And Css وسوف نتعرف على التصميم خطوة خطوة وهنبدأ مع بعض وحدة وحدة وكمان الكود هيكون متوفر للى حابب يتعلم منة
webPrey | فى هذا المقال سوف نتعلم كيفية تصميم علم فلسطين بال Html & Css وإزاى نعمل أنيميشن(animation) فى التصميم وكمان هنتعرف على إزاى تبدأ تصميم صح من غير عشوائية وبنظام سليم .
محتويات المقال
- المقدمة .
- كيف نعد للتصميم.
- ملف ال ( html code ) Html.
- ملف ال ( css code ) Css.
- الخلاصة ( هات من الأخر).
هنتعلم مع بعض فى هذا المقال كيفية تصميم علم فلسطين بلغتى Html And Css وسوف نتعرف على التصميم خطوة خطوة وهنبدأ مع بعض وحدة وحدة وكمان الكود هيكون متوفر للى حابب يتعلم منة؟
طبعأ علشان تشتغل وتكتب أكواد لازم يكون عندك برنامج لتحرير النصوص مثل Notepad ولكن هذا البرنامج لا يوجد بة أى إمكانيات تساعدك أثناء التكويد لانك هتحتاج تكتب كل شيء بنفسك بدقه ومن غير أخطاء إملائية.
علشان كده ممكن تشتغل على برنامج Visual Studio Code ولو مش عندك حملة من على الإنترنت .
او ممكن تحمله من الموقع الرسمى من هنا
مميزات البرنامج
- برنامج سهل وبسيط.
- بيساعدك على كتابة الكود.
- لو نسيت خاصية وفاكر أول كام حرف منها بيكملهالك.
- بيعمل خط أحمر تحت الكلمة اللى فيها خطأ.
- بينسق الكود ويخلية منظم بحيث يسهل قراءتة.
- وأهم ميزة بالنسبالى وبالنسبة لكل المبرمجين أنة بة نظام ال Dark mood
- ومميزات تانية كتير.
كيف نعد للتصميم
كيف نبدأ عملية الإعداد للتصميم بطريقة صحيحة , فية أكثر من طريقة لتبدأ عملية التصميم الصحيحة .لقد تم ذكر الطريقى الصحيحه للإعداد للتصميم فى مقال سابق تقدر ترجعله من هنا.
خلينى أذكرك ببعض منها
علشان تبدأ تصميم صح إتبع الأتى:
- إعمل فولدر وسميه بنفس إسم المشروع مثلاً سميتة Flag.
- داخلة أعمل folder للصور ,وأعمل folder لملفات ال Css بمعنى أصح خصص لكل حاجة فولدر خاص بيها.
- ودة هيخلى شغلك مرتب أكتر ومش هتتلغبط ولا هتوه فى حاجة.
- بعد كده إفتح برنامج visual studio code ثم من قائمة file إعمل open folder وإفنتح folder المشروع بتاعك فى البرنامج وإبدأ إشتغل.
html code
وهنا هنكتب كود ال Html لعلم فلسطين والعلم يتكون من أربعة ألوان أسود, أبيض , اخضر , أحمر.
إسم ملف ال Html هو palastine .html لو حابب تغير الأسم براحتك .
إسم ملف ال Html هو palastine .html لو حابب تغير الأسم براحتك .
الكود
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>palastine flag</title>
<link rel="stylesheet" href="css/palastine.css">
<!--make elements normal and no problem in deferent browsers-->
<link rel="stylesheet" href="css/normalize.css">
<!-- font awestom library-->
<link rel="stylesheet" href="css/all.min.css">
</head>
<body>
<div class="flag">
<h1> علم فلسطين </h1>
<div class="container">
<span class="one"></span>
<span class="two">
</span>
<span class="three"></span>
</div>
</div>
</body>
</html>
تتبع التصميم
- بنعمل div ك container علشان يمسك التصميم بتاعنا كلة.
- بنعمل heading فية العنوان.
- نعمل div يمسك العلم .
- بنعمل span three كل واحد عبارة عن لون من ألون العلم.
- هتقولى طب والمثلث هنعمل فية إى .
- هقولك المثلث هنعملة بال before.
- بنميز كل span ب class علشان نعرف ننسقهم ونديهم كل واحد لون مختلف عن الأخر.
css code
ملف ال Css يحتوى على التنسيقات والألوان الخاصة بالتصميم .
إسم ملف ال Css هو palastine.css لو حابب تغير الأسم براحتك .
خد بالك فية أنيميشن على ال heading .
إسم ملف ال Css هو palastine.css لو حابب تغير الأسم براحتك .
خد بالك فية أنيميشن على ال heading .
الكود
body{
background-color: #222222;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.flag{
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
width: 80%;
height: 400px;
background-color: #f5f5f5;
position: relative;
}
.container::before{
content: "";
position: absolute;
top: 0;
left: 0;
border-style: solid;
border-width: 200px;
border-color: transparent transparent transparent #950c13;
z-index: 1;}
/*mobile*/
@media (max-width:767px) {
.flag .container {
height: 160px;
}
.flag .container span{
width: 100%;
height: calc(160px/3);
display: block;
}
.container::before{
border-width: 80px;
}
}
/*small csreen*/
@media (min-width: 768px) {
.flag .container {
width: 750px;
}
}
/*medium screen*/
@media (min-width:992px) {
.flag .container {
width: 970px;
}
}
/*large screen*/
@media (min-width:1200px) {
.flag .container {
width: 1170px;
}
}
.flag span{
width: 100%;
height: calc(401px/3);
display: block;
}
.flag h1{
color: white;
text-align: center;
position: absolute;
top: 75px;
border: 1px solid yellow;
padding: 10px 20px;
border-radius: 6px;
transition: 0.4s;
z-index: 1;
}
.flag h1:hover{
color: black;
border: 1px solid black;
transition-delay: 0.5s;
}
.flag h1::before ,
.flag h1::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
background-color: yellow;
border-radius: 50%;
transition: 0.4s;
}
.flag h1:before{
right: -35px;
}
.flag h1::after{
left: -35px;
}
.flag h1:hover::before{
z-index: -1;
animation: right-move 0.5s linear forwards;
}
.flag h1:hover::after{
z-index: -1;
animation: left-move 0.5s linear forwards;
}
@keyframes left-move{
50%{
left: 0;
width: 13px;
height: 13px;
}
100%{
left: 0;
border-radius: 0;
width: 50%;
height: 100%;
}
}
@keyframes right-move{
50%{
right: 0;
width: 13px;
height: 13px;
}
100%{
right: 0;
border-radius: 0;
width: 50%;
height: 100%;
}
}
.flag .one{
background-color: #090909;
}
.flag .two{
background-color: white;
position: relative;
}
.flag .three{
background-color: #087812;
}
.flag .two img{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transition: 0.3s;
transform: translate(-50%, -50%);
}
.flag .two img:hover{
border: 1px solid red;
border-radius: 6px;
}
شرح سريع لملف css
- نضع خلفية للصفحة
- نحدد نوع الخط
- نعمل animation على ال heading عند عمل hover علية.
- نوسط التصميم فى منتصف الصفحة بال flex.
- نضع الوان العلم كل span هيتلون بلون.
- نعمل المثلث الملون باللون الأحمر بال before علشان نخليه ذى ما إنتة شايف كده فى التصميم .
الخلاصة ( هات من الأخر)
عرفنا إزاى نبدأ التصميم صح إزاى ننظم شغلنا علشان منتلغبطش خصوصاُ لو كان المشروع كبير.
وإتعرفنا على كود ال Html وكود ال Css .
أو ممكن تغير فيهم براحتك بس دة إذا كنت فاهم إنتة بتعمل إى.
ملحوظة هامة
لازم تسمى الملفات بنفس الأسماء اللى قولتلك عليها سواء كان ملف ال Html أو ال Css أو الصورة علشان التصميم يشتغل معاك من غير مشاكل .أو ممكن تغير فيهم براحتك بس دة إذا كنت فاهم إنتة بتعمل إى.
وكدة نكون إنتهينا من موضوعنا اليوم أتمنى لو الموضوع أعجبك تدعمنا بلايك ومتابعة والسلام عليكم ورحمة الله وبركاتة .
ومتنساش تتابعنا على صفحتنا على الفيسبوك من هنا
